<template>
    <div class="pluginUnit">
        <el-tabs v-model="activeName" class="demo-tabs" style="width: 100%;" stretch type="border-card"
            @tab-click="handleClick">
            <el-tab-pane label="服务组件" name="first">
                <el-form :model="form" ref="formRef" label-width="120px" class="form-container">
                    <el-form-item label="插件包" prop="remark">
                        <el-upload class="upload-demo" action="#" :auto-upload="false">
                            <template #trigger>
                                <el-button type="primary">选择文件</el-button>
                            </template>
                            <el-button class="ml-3" type="success">上传包</el-button>
                            <template #tip>
                                <div class="el-upload__tip">仅支持 .zip/.tar.gz 格式文件</div>
                            </template>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="描述">
                        <el-input size="large" v-model="form.remark" type="textarea" placeholder="请输入描述信息"></el-input>
                    </el-form-item>
                    <el-form-item label="类型">
                        <el-radio-group v-model="form.resource" @change="radioChange">
                            <el-radio label="服务" />
                            <el-radio label="引用" />
                        </el-radio-group>
                    </el-form-item>
                    <imageC v-show="serverShow"></imageC>
                </el-form>
 
            </el-tab-pane>
            <el-tab-pane label="前端组件" name="second"> <el-form :model="form" ref="formRef" label-width="120px"
                    class="form-container">
                    <el-form-item label="插件包">
                        <el-button type="primary">上传</el-button>
                    </el-form-item>
                    <el-form-item label="描述">
                        <el-input size="large" v-model="form.remark" type="textarea" placeholder="请输入描述信息"></el-input>
                    </el-form-item>
                </el-form></el-tab-pane>
            <el-tab-pane label="其他组件" name="third"> <el-form :model="form" ref="formRef" label-width="120px"
                    class="form-container">
                    <el-form-item label="插件包">
                        <el-button type="primary">上传</el-button>
                    </el-form-item>
                    <el-form-item label="描述">
                        <el-input size="large" v-model="form.remark" type="textarea" placeholder="请输入描述信息"></el-input>
                    </el-form-item>
                </el-form></el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup>
import { ref } from "vue";
import imageC from "./image.vue";
// 表单数据模型
const form = ref({
    remark: '',
    resource:''
});
const activeName = ref('first')
const serverShow = ref(false)
const handleClick = (tab, event) => {
    console.log(tab, event)
}
const radioChange = (val)=>{
    console.log(val)
    if(val == '服务'){
        serverShow.value = true
    }else{
        serverShow.value = false
    }
}
</script>

<style lang="scss" scoped>
.pluginUnit {
    width: 80%;
    height: 100%;
    background-color: #fff;

    .demo-tabs>.el-tabs__content {
        // padding: 32px;
        color: #6b778c;
        font-size: 32px;
        font-weight: 600;
    }

    .form-container {
        width: 100%;
        height: 100%;
        margin: 70px auto;
    }
}
</style>